<!-- 百度地图 -->
<template>
  <div class="baidu_map">
    <div id="baidu_map_container"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.init()
  },
  methods: {
    init() {
      var map = new BMapGL.Map("baidu_map_container");
      var point = new BMapGL.Point(116.404, 39.915);
      map.centerAndZoom(point, 15);
      map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
      // map.setHeading(64.5);   //设置地图旋转角度
      // map.setTilt(73);       //设置地图的倾斜角度s

      map.setMapType(BMAP_NORMAL_MAP);      // 设置地图类型为地球模式地球模式（BMAP_EARTH_MAP）卫星地图支持和标准地图（BMAP_NORMAL_MAP）普通卫星图模式（BMAP_SATELLITE_MAP）
      this.addControl(map)
    },
    addControl(map) {
      var scaleCtrl = new BMapGL.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT });  // 添加比例尺控件
      map.addControl(scaleCtrl);
      var zoomCtrl = new BMapGL.ZoomControl({ anchor: BMAP_ANCHOR_TOP_LEFT, offset: new BMapGL.Size(10, 100) });  // 添加缩放控件
      map.addControl(zoomCtrl);
      var cityCtrl = new BMapGL.CityListControl({ anchor: BMAP_ANCHOR_TOP_LEFT });  // 添加城市列表控件
      map.addControl(cityCtrl);
      var loctionCtrl = new BMapGL.LocationControl({ anchor: BMAP_ANCHOR_TOP_LEFT });  // 获取定位
      map.addControl(loctionCtrl);
      var CopyrightControl = new BMapGL.CopyrightControl({ anchor: BMAP_ANCHOR_TOP_LEFT });  // 获取定位
      map.addControl(CopyrightControl);
      map.setMapStyleV2({
        styleId: '3d71dc5a4ce6222d3396801dee06622d'
      });
    }
  }
}
</script>

<style scoped lang="scss">
.baidu_map,
#baidu_map_container {
  width: 100%;
  height: 100%;
}
</style>